<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*display  none隐藏  不占位置
          visibility   hidden 不可见  但是占位置*/

        .div1, .div2, .div4 {
            width: 500px;
            height: 200px;
            background-color: red;
        }
        .div1 {
            display: block;
        }
        .div2 {
            visibility: visible;
        }
        .div4{
            display: inline;
        }
        li {
            display: inline;
        }
    </style>
</head>
<body>
<h1>这是标题一</h1>
<div class="div1" id = "divid1">这是div一</div>
<button onclick="div1_display_none()">隐藏</button>
<button onclick="div1_display_block()">显示</button>
<h2> 这是标题二</h2>
<div class="div2" id = "divid2">这是div二</div>
<h3>这是标题三</h3>
<div class="div3">
    <div class ="div4">这是div3的嵌套div一
        <!--<p>这是div3的嵌套div一</p>-->
        <!--<h1>这是div3的嵌套div一</h1>-->
    </div>
    <div class ="div4">这是div3的嵌套div二</div>
    <!--<div class ="div4">这是div3的嵌套div三</div>-->
</div>
<h3>这是列表</h3>
<ul>
    <li>这是一</li>
    <li>这是二</li>
    <li>这是三</li>
</ul>
<script type = "application/javascript">
    function  div1_display_none() {
        div1 = document.getElementById("divid1");
        div1.style.display = "none"
    }
    function div1_display_block() {
        div1 = document.getElementById("divid1")
        div1.style.display = "block"
    }
</script>
</body>
</html>